<template>
    <div class="an-hot-list">
        <div class="an-index-title">
        {{title}}
        </div>
        <van-row gutter="15">
            <van-col span="12" >
                <div v-for="(item,index) in list" :key="item.id">
                    <goods-card class="an-bot" :goods="item" v-if="index%2 ==0"></goods-card>
                </div>
            </van-col>
            <van-col span="12" >
                <div v-for="(item,index) in list" :key="item.id">
                    <goods-card class="an-bot" :goods="item" v-if="index%2 !== 0"></goods-card>
                </div>
            </van-col>
        </van-row>
    </div>
</template>

<script>
import goodsCard from "@/components/GoodsCard/GoodsCard.vue";
export default {
  components:{goodsCard},
  data() {
    return{
      title:'',
      list:[]
    };
  },
  mounted() {
    this.getList();
  },
  methods:{

    getList() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner'
      });
      this.$api.indexSales().then(res => {
        if(res.length>0) {
          this.$toast.clear();
          this.title = res[0].name;
          this.list = res[0].goodsList;
        }
      });
    }

  }
};
</script>

<style lang="scss" scoped>
.an-hot-list{
    padding: 0 15px;
    .an-index-title{
        padding: 10px 0;
    }
}
.an-bot{
    margin-bottom: 15px;
}
</style>